<template>
    <div :class="`image_ul ${data.class.col_num} ${data.class.radius} ${data.class.image_space}`"
         :style="{'margin-bottom': data.style.margin_bottom+'px',
         'margin-left':data.style.margin_x+'px', 'margin-right': data.style.margin_x+'px'}"
    >
        <div class="image_ul_inner">
            <template v-if="data.class.col_num == 'showcase'">
                <div class="image_li_left">
                    <img class="img" :src="data.list[0]?.image" />
                </div>
                <div class="image_li_right">
                    <div class="image_li_right_hd">
                        <img class="img" :src="data.list[1]?.image" />
                    </div>
                    <div class="image_li_right_ft">
                        <div class="image_li_right_ft_li">
                            <img class="img" :src="data.list[2]?.image" />
                        </div>
                        <div  class="image_li_right_ft_li" v-if="data.list[3]">
                            <img class="img" :src="data.list[3].image" />
                        </div>
                    </div>
                </div>
            </template>

            <div class="image_li" v-for="li in data.list" v-else>
                <img class="img" :src="li.image" />
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">

const props = defineProps<{
    data: any
}>()
</script>

<style scoped lang="scss">
@use "src/views/site/diy/style.css";
</style>
